<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- <link href="../css/mui.css" rel="stylesheet" /> -->
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/asd.css" rel="stylesheet" />
		<link href="../css/asdd.css" rel="stylesheet" />
		<style>
			.a {
				border: solid 1px;
				border-radius: 25px;
				/* width: 65%; */
				text-align: center;
				height: 20px;
		
			}
		
			.b {
				padding: 2px;
				margin-top: 20px;
				
		
			}
			.body{
				margin-top: 30px;
				margin-bottom: 10px;
			}
		</style>
		<style>
					span.mui-icon {
						font-size: 14px;
						color: #007aff;
						margin-left: -15px;
						padding-right: 10px;
					}
					#info {
						padding: 20px 10px;
					}
					/*弹出层：顶部title · 文字居中微调*/
					.paytype-title{padding-left: 30px;font-size: 17px;color: #000;}
					/*付款方式 · 字号设置*/
					.mui-table-view-cell>a:not(.mui-btn){font-size: 16px;color: #333;}
				</style>
		
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
					<h1 class="mui-title">登录</h1>
				</header>
				
				
				
				
		<div style="width: 100%;height: 100%;margin-top: 80px;" align="center">
			
			<div style="height: 100%;">
				<div style="width:90 %; margin-top: 40px;">
					<img src="../img/3.png" style="width: 80px;height: 80px;">
					<form style="text-align: center;margin-top: 30px;">
						<div class="b" style="line-height: 40px;">
							<label style="width: 20%;float: left;height: 5px;">账号</label>
							<input style="width: 70%;float: left;border-radius: 20px;" class="a" type="text" placeholder="请输入账号" />
						</div>
						
						<div class="b" style="line-height: 40px;">
							<label style="width: 20%;float: left;height: 5px;">密码</label>
							<input style="width: 70%;float: left;border-radius: 20px;" class="a" type="password" placeholder="请输入密码" />
						</div>
						<div class="b" style="line-height: 40px;">
							<label style="width: 20%;float: left;height: 5px;">验证码</label>
							<input style="width: 70%;float: left;margin-right: 20px;border-radius: 20px;" class="a" type="password" placeholder="请输入验证码" />
					
					
				</div>
				<div style="margin-top: 210px;">
					<p><input type="checkbox" checked="checked" />已阅读并同意相关服务协议</p>
				</div>
				
				
			</div>
			
			
			<div style="height: 50px;width: 300px;display: flex;justify-content: center;align-items: center;">
			<div style="float: left;width: 80px;height: 20px;border-right: solid 1px #000000;">找回账号</div>
			<div style="float: left;width: 80px;height: 20px;">注册账号</div>
			</div>
			
			
			
			
		
			
	
				
					<div class="mui-content">
						<div class="mui-content-padded">
							<p>
								<a href="#pay" class="mui-btn mui-btn-blue mui-btn-block" style="padding: 5px 20px;">换个方式登录</a>
							</p>
							
							<p id="info"></p>
						</div>
					</div>
			
					
					
					<!--   4x 支付方式 · 弹框-->
					<div id="pay" class="mui-popover mui-popover-action mui-popover-bottom">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<p class="paytype-title">选择登录方式<a href="#pay" style="float: right;">关闭</a></p>
							</li>
						</ul>
						<ul class="mui-table-view font-pay">
							<li class="mui-table-view-cell ptys">
								<a href="#">微信登陆</a>
							</li>
							<li class="mui-table-view-cell ptys">
								<a href="#">QQ登录</a>
							</li>
							
						</ul>
						
					</div>
			
				</body>
				<script src="static.docs/plugins/mui/js/mui.min.js"></script>
				<script>
					mui.init({
						swipeBack:true //启用右滑关闭功能
					});
					mui('body').on('shown', '.mui-popover', function(e) {
						//console.log('shown', e.detail.id);//detail为当前popover元素
					});
					mui('body').on('hidden', '.mui-popover', function(e) {
						//console.log('hidden', e.detail.id);//detail为当前popover元素
					});
					var info = document.getElementById("info");
					mui('body').on('tap', '.mui-popover-action li.ptys>a', function() {
						var a = this,
							parent;
							console.log(a );
						//根据点击按钮，反推当前是哪个actionsheet
						for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
							console.log( parent);
							if (parent.classList.contains('mui-popover-action')) {
								console.log("OK, break!");
								break;
							}
						}
						//关闭actionsheet
						mui('#' + parent.id).popover('toggle');
						info.innerHTML = "你刚选择了\"" + a.innerHTML + "\"方式";
					})
				</script>
		
			
			
			
			
			
			
			
			
			
		</div>
<!-- 		<script src="../js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script> -->
	</body>

</html>
